<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <!-- 列表------------- -->
    <el-table v-loading="loading"
              ref="multipleTable"
              :data="Fmdatasj"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"> </el-table-column>

      <el-table-column label="序号"
                       prop="num"
                       width="100">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>

      <el-table-column prop="number"
                       label="设备编号"
                       width="240">
      </el-table-column>
      <el-table-column prop="model"
                       label="设备型号"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="address"
                       label="详细地址"
                       width="240"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="partners"
                       label="合作商"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="state"
                       label="设备状态"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="operate"
                       label="操作"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="sp11"
                @click="outerVisibleCarouselFn(scope.$index, scope.row)">货道</span>
          <span class="sp11"
                @click="handleEdit(scope.$index, scope.row)">策略</span>
          <span class="sp11"
                @click="showBulk_policy(scope.$index, scope.row)">修改</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 列表------------- -->

    <div class="block">
      <el-pagination prev-text="上一页"
                     next-text="下一页"
                     @prev-click="handleSizeChange"
                     @next-click="handleCurrentChange"

                     :current-page.sync="currentPage1"
                     :page-size="10"
                     layout="slot,next,prev"
                     :total="Number(num)">

        <span class="sp1">共{{ num }}条数据 第{{ page }}/{{ totalPage }}页</span>
      </el-pagination>
    </div>

    <!--表单弹框  -->
    <FixingDialog @updatalist="updataList"
                  :dianwei="dianwei"
                  :xinghao="xinghao"
                  :xinghaolist="xinghaolist"
                  :dianweilist="dianweilist">
    </FixingDialog>
    <!--表单弹框  -->

    <!-- 弹框2 -->
    <el-dialog title="策略管理"
               :visible.sync="Bulk_policy1"
               width="30%"
               :before-close="handleCloseFn1">
      <div class="Bulk_policy_box"
           v-loading="loading">
        <span>机械编号：{{ GetApplyPolicyDetail.innerCode }}</span>
        <span>策略名称：{{ GetApplyPolicyDetail.policyName }}</span>
      </div>
      <div class="Bulk_policy_box Bulk_policy_box1">
        <span>策略方案：{{ GetApplyPolicyDetail.discount }}%</span>
        <span></span>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="delApplyPolicyDataFn"
                   class="btn11">取 消 策 略</el-button>
      </span>
    </el-dialog>
    <!-- 弹框2 -->

    <!-- 弹框1 -->
    <el-dialog title="批量策略管理"
               :visible.sync="Bulk_policy"
               width="30%"
               :before-close="handleCloseFn">
      <el-form label-width="120px"
               size="medium"
               v-loading="loading">
        <el-form-item label="选择策略：">
          <el-select v-model="Bulk_policy_text"
                     placeholder="请选择活动区域"
                     class="select_option">
            <el-option v-for="item in getgamedata"
                       :key="item"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="Bulk_policy = false"
                   class="btn11">取 消</el-button>
        <el-button type="primary"
                   @click="goapplyPolicy">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹框1 -->

    <!-- 修改弹框 -->
    <el-dialog title="修改设备"
               :visible.sync="Bulk_policy2"
               width="38%"
               :before-close="updatahandleCloseFn">
      <el-form label-width="120px"
               size="medium"
               v-loading="loading"
               class="updata_tk">
        <p>机器编号：{{ EveryItem.innerCode ? EveryItem.innerCode : "" }}</p>
        <p>供货时间:2002.02.02 14:54:04</p>
        <p>设备类型：{{ EveryItem.type?.name ? EveryItem.type?.name : "" }}</p>
        <p>设备容量：{{ EveryItem.type?.channelMaxCapacity }}</p>
        <el-form-item label="设备点位:">
          <el-select v-model="Bulk_policy_text_updata"
                     placeholder="请选择活动区域"
                     class="select_option">
            <el-option v-for="item in currentPageRecordsdata"
                       :key="item"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <p class="p11">
          合作商：{{
            EveryItem.node?.ownerName ? EveryItem.node.ownerName : ""
          }}
        </p>

        <p class="p11">
          所属地区：{{ EveryItem.region?.name ? EveryItem.region.name : "" }}
        </p>

        <p class="p11">
          设备地址：{{ EveryItem.node?.name ? EveryItem.node.name : "" }}
        </p>
      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="Bulk_policy2 = false"
                   class="btn11">取 消</el-button>
        <el-button type="primary"
                   @click="updatagoapplyPolicy">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹框1 -->

    <!-- 走马灯弹框 -->
    <FixingCarousel :outerVisibleCarousel.sync="outerVisibleCarousel"></FixingCarousel>
    <!-- 走马灯弹框 -->
  </div>
</template>

<script>
import {
  delApplyPolicyData,
  getadd,
  GetApplyPolicyData,
  getsearchList,
  getgamedata,
  GetApplyPolicy,
  // getCarglaneDetail,
  updataPolicyData
} from '@/api/fixing/fixing'
import FixingDialog from '@/components/fixingCompts/FixingDialog.vue'
import FixingCarousel from '@/components/fixingCompts/fixingCarousel .vue'
import { mapState } from 'vuex'
export default {
  name: 'FixingBottom',
  components: {
    FixingDialog,
    FixingCarousel
  },
  props: [
    'list',
    'num',
    'detailList',
    'totalPage',
    'dianwei',
    'xinghao',
    'xinghaolist',
    'dianweilist'
  ],
  created () { },
  mounted () { },
  computed: {
    Fmdatasj: {
      get () {
        return this.Fmlist
      },
      set (val) {
        // console.log(val);
        this.Fmlist = val
      }
    },
    ...mapState('fixing', ['dialogFormVisible']) // 弹出框状态
  },
  data () {
    return {
      // detailList:'',
      outerVisibleCarousel: false, // 货道设置弹窗
      Bulk_policy_text_updata: '', // 修改设备的双绑
      getgamedata: [],
      Bulk_policy_text: '', // 策略的input双向绑定值
      loading: false,
      Bulk_policy: false,
      Bulk_policy2: false, // 修改设备的弹框状态
      Bulk_policy1: false,
      GetApplyPolicyDetail: '',
      innerCode: '',
      Fmlist: [],
      currentPageRecords: '',
      currentPageRecordsdata: '',
      tableData: [
        {
          num: 1,
          number: '11321412',
          model: '综合机',
          address: '北京大鸟巢',
          partners: '谨言龙合作商',
          state: '运营'
        }
      ],
      formLabelWidth: '120px',
      multipleSelection: [], // 拿到的单选数据
      currentPage1: 1,
      page: 1,
      numberCel: '',
      updataRouw: '',
      EveryItem: '',
      val: ''
    }
  },
  // 方法------------------------------------------
  methods: {
    // ---------------------------- //货道设置弹窗----------------------------
    async outerVisibleCarouselFn (index, rouw) {
      const num = this.detailList.find(item => item.innerCode === rouw.number).businessId
      this.$store.commit('Cargolane/setbusinessId', num)
      //  console.log(this.detailList);
      this.$store.dispatch('Cargolane/getCarglaneDetaildata', rouw.number)
      this.outerVisibleCarousel = true
    },

    // ---------------------------- //货道设置弹窗----------------------------
    // 修改设备
    async updatagoapplyPolicy () {
      // 确认按钮
      try {
        console.log(this.Bulk_policy_text_updata)
        const nodeId = this.currentPageRecords.find(
          (item) => item.name === this.Bulk_policy_text_updata
        ).id
        this.EveryItem = this.detailList.find(
          (item) => item.innerCode === this.updataRouw.number
        )
        const id = this.EveryItem.id
        console.log(nodeId)
        console.log(id)
        await updataPolicyData({
          nodeId,
          id
        })
        this.$message.success('修改成功')
        this.Bulk_policy2 = false
        this.handleCurrentChange(this.val ? this.val : 1)
      } catch (e) {
        this.$message.error('该设备正在运营')
        this.Bulk_policy2 = false
      }
    },
    updatahandleCloseFn () {
      this.Bulk_policy2 = false
    },
    async showBulk_policy (index, rouw) {
      // 修改按钮
      this.updataRouw = rouw
      this.Bulk_policy_text_updata = rouw.address
      this.Bulk_policy2 = true
      const res = await getadd({
        pageIndex: 1,
        pageSize: 1000000
      })
      console.log(res)
      this.currentPageRecordsdata = res.data.currentPageRecords.map((item) =>
        item.name ? item.name : ''
      )
      this.currentPageRecords = res.data.currentPageRecords
      // console.log(this.currentPageRecords);
      //  console.log(this.updataRouw.number);
      // console.log(this.detailList);
      this.EveryItem = this.detailList.find(
        (item) => item.innerCode === this.updataRouw.number
      )
      // console.log(this.EveryItem);
    },

    // 增加策略
    handleCloseFn () {
      this.Bulk_policy = false
    },
    async goapplyPolicy () {
      try {
        this.loading = true
        console.log(this.applyPolicy)
        console.log(this.Bulk_policy_text)
        const policyId = this.applyPolicy.find(
          (item) => item.policyName === this.Bulk_policy_text
        ).policyId
        console.log(policyId)
        console.log(this.numberCel)
        const innerCodeList = Array(this.numberCel)
        console.log(innerCodeList)
        await GetApplyPolicy({
          innerCodeList,
          policyId
        })
        this.Bulk_policy = false
        this.loading = false
        this.$message.success('操作成功')
        this.Bulk_policy_text = ''
      } catch (e) {
        this.$message.error('请选择策略类型')
        this.loading = false
      }
    },

    // 删除策略
    async delApplyPolicyDataFn () {
      try {
        this.loading = true
        console.log(this.innerCode)
        console.log(this.GetApplyPolicyDetail.policyId)
        const res = await delApplyPolicyData({
          data: this.innerCode,
          policyId: this.GetApplyPolicyDetail.policyId
        })
        console.log(res)
        this.Bulk_policy1 = false
        this.loading = false

        this.$message.success('删除成功')
      } catch (e) {
        console.log(e)
        this.$message.error('删除失败')
      }
    },
    // 修改策略
    handleCloseFn1 () {
      this.Bulk_policy1 = false
    },

    async handleEdit (index, rouw) {
      this.numberCel = rouw.number
      this.innerCode = rouw.number
      const res = await GetApplyPolicyData(rouw.number)
      this.GetApplyPolicyDetail = res.data
      if (this.GetApplyPolicyDetail) {
        console.log(1)
        this.Bulk_policy1 = true
      } else {
        this.Bulk_policy = true
        const res = await getgamedata()
        this.getgamedata = res.data.map((item) =>
          item.policyName ? item.policyName : ''
        )
        this.applyPolicy = res.data
        console.log(this.applyPolicy)
      }
    },

    // 修改策略
    updataList (val) {
      let num1 = this.num
      // this.num++
      this.$emit('updata:num', num1++)
    },
    handleSelectionChange (val) {
      //  console.log(val);
      // this.multipleSelection = val;
      this.$emit('getmultipleSelection', val)
    },

    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    async handleSizeChange (val) {
      console.log(val)
      this.val = val
      this.loading = true
      const res = await getsearchList({
        pageIndex: val,
        pageSize: 10
      })
      console.log(res.data.currentPageRecords)
      this.$emit('updata:detailList', res.data.currentPageRecords)
      // this.detailList = res.data.currentPageRecords

      const Fmdata = res.data.currentPageRecords.map((item, index) => {
        return {
          num: index + 1 + (val - 1) * 10,
          number: item.innerCode,
          model: item.type?.name ? item.type.name : '未知',
          address: item.node?.name ? item.node.name : '未知',
          partners: item.ownerName ? item.ownerName : '未知',
          state:
            item.vmStatus === 1
              ? '运营'
              : '' || item.vmStatus === 0
                ? '未投放'
                : '' || item.vmStatus === 3
                  ? '撤机'
                  : ''
        }
      })
      console.log(Fmdata)
      this.loading = false
      this.Fmdatasj = Fmdata
      this.page = val
    },
    async handleCurrentChange (val) {
      this.val = val
      this.loading = true
      const res = await getsearchList({
        pageIndex: val,
        pageSize: 10
      })
      console.log(res.data)

      // this.detailList = res.data.currentPageRecords
      this.$emit('updata:detailList', res.data.currentPageRecords)

      const Fmdata = res.data.currentPageRecords.map((item, index) => {
        return {
          num: index + 1 + (val - 1) * 10,
          number: item.innerCode,
          model: item.type?.name ? item.type.name : '',
          address: item.node?.name ? item.node.name : '',
          partners: item.ownerName ? item.ownerName : '',
          state:
            item.vmStatus === 1
              ? '运营'
              : '' || item.vmStatus === 0
                ? '未投放'
                : '' || item.vmStatus === 3
                  ? '撤机'
                  : ''
        }
      })
      this.loading = false
      console.log(Fmdata)
      this.Fmdatasj = Fmdata
      this.page = val
    }
  },
  watch: {
    list: {
      deep: true,
      handler (newval) {
        this.Fmdatasj = newval
      }
    }
  }
}

</script>

<style scoped lang="less">
.btn11{
  background-color: #718cef;
  color: #fff;
}
.updata_tk {
  .p11 {
    margin-top: 36px;
  }
  p {
    margin-left: 48px;
  }
}

.sp11 {
  color: #5f84ff;
  margin-left: 8px;
  cursor: pointer;
}
.sp1 {
  font-size: 14px !important;
  color: #dbdfe5 !important;
}
::v-deep .el-pagination .btn-prev {
  float: right;
  background-color: #d5ddf8 !important;
  width: 70px;
  height: 32px;
  margin: 0 16px;
  border-radius: 2px;
}
::v-deep .el-pagination .btn-next {
  float: right;
  background-color: #d5ddf8 !important;
  width: 70px;
  height: 32px;
  margin: 0 16px;
  border-radius: 2px;
}
::v-deep .block {
  margin-top: 30px;
}
::v-deep .el-pagination.btn-prev.el-icon {
  color: red;
}
::v-deep .el-pagination__total {
  font-size: 14px !important;
  color: #dbdfe5 !important;
}
p {
  margin-left: 39px;
  margin-bottom: 30px;
}
.el-table {
  margin-top: 20px;
}
.sp1 {
  margin-left: 10px;
  color: #6586f7;
  cursor: pointer;
}
::v-deep .el-dialog__title {
  font-size: 16px !important;
  font-weight: bold !important;
}
.Bulk_policy_box {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 0 40px;
}
.Bulk_policy_box1 {
  margin-top: 20px;
}
.btn11:hover {
  color: #606266;
}
</style>
